<script setup>
import { onBeforeMount, onMounted, reactive } from 'vue';
import { makeMockData } from './utils.js';

defineOptions({
  name: 'RepeatLoading',
});

const loadingBtnText = {
  'true': '隐藏',
  'false': '显示',
};

const state = reactive({
  currentTab: 'basic',
  dataList: [],
  isLoading: false,
  hasLoadedAll: false,
  //
  pageSize: 10,
  pageIndex: 0,
  //
  loadingProps: {
    label: '加载中...',
    showing: true,
  },
  btnText: loadingBtnText['true'],
});

const loadingAttrs = reactive({
  'showing': true,
  'label': 'Please wait...',
  'label-class': 'text-teal',
  'label-style': 'font-size: 1.1em',
});

const fetchPageData = () => {
  if (state.hasLoadedAll || state.loadingProps.showing) return;

  state.pageIndex += 1;
  const { List, Total } = makeMockData(state.pageIndex, state.pageSize);
  console.log('fetchPageData', List, Total);
  state.dataList = state.dataList.concat(List || []);
  state.hasLoadedAll = List.length >= Total;
};

onBeforeMount(() => {
  // fetchPageData();
});

onMounted(() => {
  setTimeout(() => {
    // state.loadingProps.showing = false;
  }, 30000);
});
</script>

<template>
  <div class="repeat-usage q-pa-md full-height">
    <t-section>
      <!-- <q-toggle
        disabled
        v-model="state.loadingProps.showing"
        :label="`${state.loadingProps.showing ? '显示' : '隐藏'}`"
      /> -->
    </t-section>

    <h6>使用默认的loading效果</h6>
    <t-repeat
      style="position: relative;"
      :loading="state.loadingProps"
    ></t-repeat>

    <h6 class="">可以通过loading具名插槽自定义loading中展示的内容</h6>
    <t-repeat :loading="state.loadingProps" style="position: relative;">
      <template #loading>
        <div class="row justify-center q-my-md">
          <img src="/loading.gif" />
        </div>
      </template>
    </t-repeat>


    <!-- <h6>可以通过配置 loading 属性对象，控制内部的 TLoading</h6>
    <t-repeat
      :loading="loadingAttrs" style="position: relative;"
      loadingText="正在努力加载..."
    ></t-repeat> -->
  </div>
</template>

<style scoped lang="scss">
::v-deep .teld-repeat-component {
  .repeat-list {
    // min-height: 200px;
  }
}
</style>
